Help:CSS
Inline CSS is that is embedded directly into the code. The wikitext and the inline css could affect more than a simple table. To answer the question, could I do that, try to consider everything on a webpage as a box that you could customize. As example, you could give style onto text, tables, links, pictures, headers and much more. A style attribute is added to an opening HTML tag (style="…"), which can contain multiple CSS declarations between the quotation marks; these declarations apply to everything contained within the corresponding HTML tags. A CSS declaration consists of an attribute, a colon, and a value to assign to the attribute. Multiple CSS declarations are allowed and must be separated by semicolons. ---- :selector or element, followed by a declaration who contain property with value. *Various HTML tags are allowed. *Furthermore inline-CSS can be used for chart syntax. *More information at . |} Ex : Some text :A good reason why, wikia recommend only limited use of inline CSS, is because actual web content (beyond HTML5) is dynamically updated. Classes and templates help to upkeep codes without having to re-open pages. Note also that css may not properly display on a cellphone. *See *Using CSS classes is generally a better approach for styles that occur repeatedly, as it is easier to update. *About syntax, see also : … *Note that blink value is not supported on Chrome On this page, possible values and their effects on the single CSS attributes will be described onto sections. Common property Theses effects could be inserted into any elements bellow Alignment (elements and text) ---- Vertical alignment and the horizontal alignment :::Horizontal alignment :::Vertical alignment ;Text Orientation ;Vertical Alignment ::With vertical-align more than just text can be aligned. Color and shadow ---- Every elements could have some color sets and shadows. :see Text Color Background color CSS3 Gradient property ::Note : A line of this code is different for a browser, ex Chrome, to an another ex Opera. CSS3 Colors *Title use red rgba color with transparency, and hsla red background-color *Note: Doesn't work on some older browser … ;RGBA colors :rgba(255, 0, 0, 0.2); :rgba(red, green, blue, alpha) :alpha = opacity, transparency ;HSL colors :hsl(120, 100%, 50%); :hue saturation lightness ;HSLA Colors :hsla(120, 100%, 50%, 0.3); :hue saturation lightness alpha(opacity) Transparency (CSS3 Opacity) Set both text color and background-color Blending Mixtures with text and images using blend modes require table cell background color to be used otherwise it will not work. Text shadows The first two values (position of the shadow to the right, below) are mandatory, all others can be omitted. Box-shadow Tables and Div-sections may be using box-shadow propose a shadow. The first two values (position of the shadow to the right / bottom) are mandatory, all others can be omitted. :Note : You may have to include a clear="" to keep space between element with shadow and the next one. Border, margin and padding ---- Contents like text, inside an element, could contain padding, margin, borders and outline. Borders are also called outline. :Note : outline:; is also a property who display, but outside the total width of his element. As value he could contain style, color and width Border and radius (rounded) ---- Every elements could have border and theses borders could be rounded using the CSS3 radius property. Border thickness -type, and -color These three attributes are all set by the attribute "border"; up to 3 values, separated by spaces, are Entered after the colon in the Following order: width, type, color. Color and thickness can only be set with the type along. If you want to change the border on one side only then use "border-top", "border-bottom", "border-left" or "border-right" (upper, lower, left, right). Superposed Borders |- ! Values !! Effect |- | Collapse || adjacent edges overlap to an edge |- | separate || adjacent edges remain separated (as in this table) |} Distance between adjacent edges If adjacent edges are separated, it is possible with the distance between them border-spacing set. If two values are given, the first one refers to distances up / down. |- ! Values !! Effect |- | __px || Distance in pixels |- | __em || depending on the font size (1em = height of the current large print) |- | __ex || depending on the font size (1ex = height of the current lower case) |} Rounded corners The property border-radius accepts up to 8 values; the first four values determine the initial radius in the horizontal plane, the last four of the end radius in the vertical. The value foursquare relate to the four corners, starting with the upper left in a clockwise direction. Excluding a fourth value away, so he accepts the value of the corner opposite, as in only two or a value. The second square can be completely omitted, so that the radii remain constant in a corner. ;Margin The property Margin accepts up to four values above for the distances in the directions, right, down, left standing (mnemonic: analog clock). If the fourth value is omitted, there engages the value of opposite, etc. With margin-right: auto and margin-left: auto, can be a box to the right or left side slide, without being enveloped text or other inline elements. ;Padding The property Padding accepts as margin up to four values that apply to the distances from the edge inwards. ;Framing The property outline provides a framework around the outside of the object (ie, even at the margin around). Outline is the same set as border. Float and clear ---- The Float property pushes the item to the edge and lets it flow around the element following inline elements such as text. ;Allow no text runaround ... Or similar inline elements. This property is often in use at the end of a section, in order to prevent that from below nothing pure slipping upwards. Display and visibility ---- ;Hide items ;Remove items Width and height ---- With max-height, min-height, max-width and min-width can be left out in one direction Scaling content You can adjust the content size scale by changing the values by ScaleX, ScaleY, Scale3D or Scale. Prevent outflow With overflow you can define what should happen if the content is too large for the box down. Elements (Create layout and boxes) Headers HTML CSS Wikitext HTML headers level : Title 2, 3, 4, 5, 6 CSS and headers : div style="__:___;" Title /div wikitext headers Title =Title = :Note : Inline CSS with headers is easier to include in the HTML markup. :Note 2 : As always, you could give style to the title text using a span :Note 3 : Centered headers disappear on cellphone browsers. Lists ---- There is a lots of style you could apply to a list! :See also Help:list on wikipedia :Note : Lists could be nested. Anywhere a item is created, you could start a new list to indent the first one. Or start a line with more than one **, or ##. ;Lists Lists can be customized with the property list-style design, which accepts up to three values: type and position of the points list, and a URL to a graphic file that is to be used as a list item (in this order). Inline CSS with lists can only with pure HTML (Help: HTML / lists) are used. Tables ---- :Note : colspan="" and rowspan="" are used to merge cells. The following attributes are not exclusive for charts, but are often used for them. :see Display empty cells In separate edges can adjust to that empty cells receive any formatting. |- ! Values !! Effect !! Example |- | show || formatted blank cells || |- | hide || unformatted empty cells || |} Position table heading |- ! Values !! Effect |- | top || Heading above |- | bottom || Heading down (as here) |} Regroup styles HTML tags include options to regroup style into fewer lines that was not formatted into wiki text. :Ex : Cut a table into head, body and footer section in order to create different CSS styles using Or create a style using then apply it to any section using a Row Height Links ---- :See also :See See also : ;Formatting Some CSS could modify the way links are displayed like "list-style:;". If you want to change the displayed text, write it between tag ex : The links help page The links help page Medias and pictures ---- ;Text and links :Pictures could be inserted on pages, as a link placing a : before the media type name. :Ex : file:logo.pngfile:logo.pngfile:logo.png ;Formatting See also ;Image map :Require an extension to be installed inside your wikia :use the tag. Inside you could specify : :" circle 220 120 30" type position x, y and size of button. Then, follow the line with a link. ;Galleries, slideshows and sliders These elements are not easy to write inline using CSS. :Use the wikitext : See Help%3AGalleries%2C_Slideshows%2C_and_Sliders Text ---- Text Formatting (font -style, -weight) ;Font … The font-family property specifies a list of fonts to apply, in order of preference. The browser applies the first available font for the enclosed text. Always use a generic group name like serif or sans-serif last as a fail-safe default. ;Font size ;Font width (spacing) ;Italics ;Bold Text Decoration :Try style="text-decoration:underline;" ;Text markers Note that blink is not supported by Chrome. Use CSS3 Animation instead. Large, small Character ;Small font Indent Text Paragraph, or Vertical indentation could be obtained by using the br / tag or by leaving a double empty line in source mode. :note that some html tags automatically add some white space before and after the content like the p /p tag. :pre /pre tag keep both space and blank lines. Usefull to display a poem. Word arts ;CSS Inset text shadow Word art - Inset text shadow #) For the font and the shadows, chose a dark color. #) As value, select a color code who support opacity. #) As value, select the "em" font size who adjust himself. #) In order to create an inset text shadow, We reverse the font with the shadow. ##) Unlike the usual, the shadow is bigger than his font. ##) With the text-shadow property, create 4 shadow using the 2 first value to cover bottom-right, top-right, top-left, bottom-left. ##) The font color opacity must be twice as visible as the one for the shadow. ##) For the shadow's position, as both value, 0.02em is the maximum value you could set, in order to have a inset shadow. Higher number would multiply the font by 4 instead. ##) Diagonally chose 2 of the shadow who will have 1 as opacity (Will be totally visible). #) Result: Print a dark colored shadow into 4 direction who is so small that the font itself would appear inside his own shadow. Then lower diagonally the color opacity on shadows and on the font to create a inset shadow; inside the font characters. Word art test - Inset text shadow ;Word art - Reflecting text :The only inconvenience is the word have to be written twice. Reflect Reflect Slogan Slogan ;Word art - bordered text Word art test - bordered text This is a variation of the inset text-shadow where the font is white and his opacity is 100% visible ;Word art - font gradient :It could be used to give a metallic font color effect Gradient colored text Gradient colored text ;Word art - Gummy's like font Word art test - Gummy :A variation of inset text shadow using half transparent white font, bold text and a 5th grey shadow facing south. Word art test - Gummy Without classification Tooltips ---- See also In HTML, specify a parameter as title="tooltips to be displayed" inside a another element. Usually displayed on mouse over. CSS tooltips require pseudo element who are not available by default on wikia. As wiki text, tooltips is set as example specifying |text inside a picture's link]]. :Ex : More text as a tooltips 100px|More text as a tooltips Magic words ---- br tag separate text in 2 lines and hr create a thematic change. :See : Help%3AMagic_words :See Responsive ---- Using wikitext, and CSS could be a good opportunity to create pages who adjust themselves to fit small cell phone screen. But, most of customization using CSS is disabled on cellphones by wikia. As example a centered header using a DIV would not display on a cellphone. :See also : help:Infoboxes CSS3 Collumn count (and TOC) ---- ;Effects on TOC Table of content is included by default on any wikia pages. Use __TOC__, to specify his position. Some effect that could be set on TOC include :div :style=" : -webkit-column-count: 3; /* Chrome, Safari, Opera */ : -moz-column-count: 3; /* Firefox */ : column-count: 3;" :/div See also : The class nonumtoc, toclimit-2, :Note about CSS3 : Theses effect are not available with every browser a reader could use and most of them require a recent browser; a recent system. Special characters Wikia offert this shortcut to fix text you don't want your browser to translate into code. . If for a reason this trick need a replacement. Ask for a characters using his html code instead Note : () Has been added to make it easier to understand :See also : http://www.ascii.cl/htmlcodes.htm See also * * w3schools * CSS Tricks * * * * * * * * * * * * * * Further help and feedback * de:Hilfe:Formatieren/Wikitext/CSS ja:ヘルプ:ページのフォーマット/ウィキテキスト/CSS pt:Ajuda:Wikitexto/CSS ru:Справка:Викитекст/CSS uk:Довідка:Вікітекст/CSS Category:Help Category:Editing Category:Source editing